<template>
    <div class="swiper-container">
      <swiper class="swiper" :modules="modules" :slides-per-view="1" :loop="true" :pagination="{
        clickable: true
      }" :autoplay="{ delay: 2500, disableOnInteraction: false }">
        <swiper-slide class="swiper-slide" v-for="(slide, index) in slides" :key="index">
          <img :src="slide.src" :alt="slide.alt" />
        </swiper-slide>
        <swiper-pagination slot="pagination" />
      </swiper>
    </div>
  </template>
  
  <script setup>
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Pagination, Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/pagination';
  
    // 注册Swiper模块
    const modules = [Pagination, Autoplay];

  // 定义图片数据
  const slides = [
    {
      src: 'https://sdcc.edu.cn/storage/backendUploads/20221206/a33a632aac523a38e167c5bb7490b36c.png',
      alt: 'Slide 1'
    },
    {
      src: 'https://sdcc.edu.cn/storage/backendUploads/marx/image/20230504/b74d18249e31197ebff2f35f1d073384.jpg',
      alt: 'Slide 2'
    },
  ];
  </script>

<style scoped lang="scss">
.swiper-container {
    @media (max-width: 468px) {
        margin: 0;
        height: 200px;
    }
    margin-top: 50px;
    width: 100%;
    height: 700px;
    .swiper {
        width: 100%;
        height: 100%;
        .swiper-slide {
            width: 100% !important;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>